import React, { Component } from 'react';
import fullpage from 'fullpage.js';
import styles from './index.less';
import 'fullpage.js/dist/fullpage.min.css';

class Fullpage2 extends Component {
  componentDidMount() {
    if (window.fullpage_api) {
      window.fullpage_api.destroy('all');
    }
    let fullPageInstance = new fullpage('#myFullpage', {
      navigation: true,
      sectionsColor: ['#ff5f45', '#0798ec', '#fc6c7c', 'grey'],
    });
  }
  render() {
    return (
      <div id="myFullpage" className={styles.wrapper}>
        <div className={`section ${styles.section_div}`}>
          <div className={styles.section_page}>
            <h2>我是第一页</h2>
          </div>
        </div>
        <div className={`section ${styles.section_div}`}>
          <div className={styles.section_page}>
            <h2>我是第二页</h2>
          </div>
        </div>
        <div className={`section ${styles.section_div}`}>
          <div className={styles.section_page}>
            <h2>我是第三页</h2>
          </div>
        </div>
        <div className={`section ${styles.section_div}`}>
          <div className={styles.section_page}>
            <h2>我是第四页</h2>
          </div>
        </div>
      </div>
    );
  }
}

export default Fullpage2;
